<template>
	<view>
		<scroll-view scroll-y class="scrollPage">
			<view class="UCenter-bg padding-top-lg">
				<image :src="vuex_user.avatar ? vuex_user.avatar : logo" class="avatar" mode="" @click="editUserInfo"></image>

				<block v-if="vuex_user.id">
					<view class="text-xl margin-top-sm">
						{{ vuex_user.nickname }}
						<!-- <text class="text-df">v2.0</text> -->
					</view>
					<view class="margin-top-sm">
						<text class="text-cut">{{ vuex_user.bio || '什么都还没写哦~~' }}</text>
					</view>
				</block>

				<block v-if="!vuex_user.id">
					<view class="margin-top-xl"><button class="cu-btn bg-white padding-lr-xl" @click="goLogin">授权登录</button></view>
				</block>
			</view>
			<view class="padding flex text-center text-grey bg-white shadow-warp">
				<view class="flex flex-sub flex-direction solid-right" @click="mytest(0)">
					<view class="text-xxl text-orange" v-text="vuex_user.unfinish_num ? vuex_user.unfinish_num : 0"></view>
					<view class="margin-top-xs">未完成</view>
				</view>
				<view class="flex flex-sub flex-direction solid-left" @click="mytest(1)">
					<view class="text-xxl text-orange" v-text="vuex_user.finish_num ? vuex_user.finish_num : 0"></view>
					<view class="margin-top-xs">已完成</view>
				</view>

				<!-- 	<view class="flex flex-sub flex-direction solid-right" @click="openPage()">
					<view class="text-xxl text-blue">789</view>
					<view class="margin-top-xs">
						赠送
					</view>
				</view> -->
			</view>
			<view class="cu-list menu card-menu margin-top margin-bottom-xl shadow-lg radius">
				<view class="cu-item arrow" @click="mytest(0)">
					<view class="content">
						<text class="cuIcon-newshot text-mauve"></text>
						<text class="text-grey">我的测试</text>
					</view>
				</view>

				<view class="cu-item arrow" @click="callphone">
					<view class="content">
						<text class="cuIcon-servicefill text-red"></text>
						<text class="text-grey">联系客服</text>
					</view>
				</view>

				<view class="cu-item arrow" @click="goFeedback">
					<view class="content">
						<text class="cuIcon-writefill text-cyan"></text>
						<text class="text-grey">意见反馈</text>
					</view>
				</view>
				<view class="cu-item arrow" v-if="vuex_user.id" @click="goOut">
					<view class="content">
						<text class="cuIcon-exit text-gray"></text>
						<text class="text-grey">退出登录</text>
					</view>
				</view>
			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	computed: {
		logo() {
			return this.vuex_config.logo || '';
		}
	},
	onShow() {
		if (this.vuex_user.id) {
			//刷新用户信息
			this.getmyinfo();
		}
	},
	data() {
		return {};
	},
	methods: {
		getmyinfo() {
			this.$api.myinfo().then(res => {
				uni.stopPullDownRefresh();
				if (res.code) {
					this.$vuex('vuex_user', res.data);
				}
			});
		},
		callphone() {
			uni.makePhoneCall({
				phoneNumber: this.vuex_config.phone
			});
		},
		editUserInfo() {
			if (!this.vuex_user.token) {
				this.$common.errorToShow('请先登录！');
				return;
			}
			this.$common.navigateTo(this.$ph.edit);
		},
		goFeedback() {
			this.$common.navigateTo(this.$ph.feedback);
		},
		mytest(index) {
			this.$common.navigateTo(this.$ph.mytest + `?index=${index}`);
		},
		goLogin() {
			// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ
			this.$common.navigateTo(this.$ph.choose_login);
			// #endif
			// #ifdef H5 || APP-PLUS
			this.$common.navigateTo(this.$ph.login);
			// #endif
		},
		goOut() {
			this.$vuex('vuex_user', '');
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		if (this.vuex_user.id) {
			//刷新用户信息
			this.getmyinfo();
		}else{
			this.$common.errorToShow('请先登录');
			uni.stopPullDownRefresh();
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f4f6f8;
}
.UCenter-bg {
	background-image: linear-gradient(45deg, #6739b6, #ec008c);
	height: 500upx;
	display: flex;
	justify-content: center;
	overflow: hidden;
	position: relative;
	flex-direction: column;
	align-items: center;
	color: #fff;
	font-weight: 300;
	text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	text {
		opacity: 0.8;
	}
	image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
	}
	.gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}
}

map,
.mapBox {
	left: 0;
	z-index: 99;
	mix-blend-mode: screen;
	height: 100rpx;
}

map,
.mapBox {
	width: 750rpx;
	height: 300rpx;
}
</style>
